<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP

        CSS (opens new window)属性 mask-composite 属性指定多个遮罩图像如何组合在一起。
        以下表格中列出的所有组合模式

        属性值	     说明
        add	        将多个遮罩图像相加，显示他们的并集（显示区域并集）
        subtract	显示上层遮罩图像有，而下层遮罩图像没有的部分
        intersect	显示所有遮罩图像重叠的部分（显示区交集）
        exclude	    显示所有遮罩图像不重叠的区域

        注意：
        遮罩图像在组合时，是按 mask-image 后面值的书写顺序从后往前来组合的。
        写在前面的叫上层，写在后面的叫下层
    -->

    <style>
        .wrap {
          display: inline-block;
          border: 2px solid red;
        }
        .mask {
          width: 200px;
          height: 100px;
          /* 背景图片 */
          background-image: url("/src/img/css3/ms.jpg");
          /* background-image: radial-gradient(50px at 50px 50px,red,red 100%,transparent), 
              radial-gradient(50px at 100px 50px,blue,blue 100%,transparent),
              radial-gradient(50px at 150px 50px,green,green 100%,transparent); */
          mask-image: radial-gradient(50px at 50px 50px, red, red 100%, transparent),
            radial-gradient(50px at 100px 50px, blue, blue 100%, transparent),
            radial-gradient(50px at 150px 50px, green, green 100%, transparent);
          /* 遮罩图合成操作 */
          mask-composite: exclude;
        }
      </style>
      
      <div class="wrap">
        <div class="mask"></div>
      </div>
</body>
</html>